<template>
  <div>
    汉诺塔练习：
    <div class="box" v-for="(item, index) in list" :key="item.id">
      <div class="prac-title" v-show="index == num">
        <p>{{ item.title }}</p>
        <ul class="prac-select">
          <!-- 选项 -->
          <li v-for="(items, index) in item.option" :key="items.id">
            <input type="radio" name="radio" @click="checkeditem(item, items)" />
            {{ items.name }}
          </li>
        </ul>
        <!-- 操作栏 -->
        <button @click="tolist()">上一题</button>
        <button @click="tonext()">下一题</button>
        <button @click="toview(item.id)">查看答案</button>
        <button @click="tocollect(item)">收藏</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useUserStore } from "../../../../store/useUserStore.js"
import { ElMessage } from 'element-plus';
import axios from 'axios';

const { changeUser, user } = useUserStore()

const list = [
  {
    exe_id:1,
    alg_id:1,
    id: 1,
    title: "1. 3层汉诺塔最少移动几次可以完成？",
    option: [
      {
        id: 1,
        name: "A. 7次",
      },
      {
        id: 2,
        name: "B. 9次",
      },
      {
        id: 3,
        name: "C. 11次",
      },
      {
        id: 4,
        name: "D. 13次",
      },
    ],
    anser: "A"
  },
  {
    exe_id:2,
    alg_id:1,
    id: 2,
    title: "2. 4层汉诺塔最少移动几次可以完成？",
    option: [
      {
        id: 1,
        name: "A. 9次",
      },
      {
        id: 2,
        name: "B. 13次",
      },
      {
        id: 3,
        name: "C. 15次",
      },
      {
        id: 4,
        name: "D. 20次",
      },
    ],
    anser: "C"
  },
  {
    exe_id:3,
    alg_id:1,
    id: 3,
    title: "3. 5层汉诺塔最少移动几次可以完成？",
    option: [
      {
        id: 1,
        name: "A. 21次",
      },
      {
        id: 2,
        name: "B. 27次",
      },
      {
        id: 3,
        name: "C. 31次",
      },
      {
        id: 4,
        name: "D. 33次",
      },
    ],
    anser: "C"
  },
]

const num = ref(0)
// 上一题
const tolist = () => {
  if (num.value == 0) {
    ElMessage.warning("这是第一题哦！");
    return;
  }
  if (num.value === list.length - 1) {

    checkedinp.value = '';
    answer.value = '';
    num.value--;
    return
  }
  if (checkedinp.value === '') {
    ElMessage.warning('还没有答题哦！');
  } else {
    if (checkedinp.value === answer.value) {
      axios.post(`/oasadapi/users/addcorrectnum`, user.user_name);
      ElMessage.success("答案正确！");

    } else {
      axios.post(`/oasadapi/users/addwrongnum`, user.user_name);
      ElMessage.error('答案错误，再思考一下吧');

    }
  }

  checkedinp.value = '';
  answer.value = '';
  num.value--;
}

//选择

const checkedinp = ref('');
const answer = ref("");
const checkeditem = (item, items) => {
  checkedinp.value = items.name[0];
  answer.value = item.anser;
}

// 下一题
const tonext = () => {
  if (checkedinp.value === '') {
    ElMessage.warning('还没有答题哦！');
  } else {
    if (checkedinp.value === answer.value) {
      axios.post(`/oasadapi/users/addcorrectnum`, user.user_name);
      ElMessage.success("答案正确！");

    } else {
      axios.post(`/oasadapi/users/addwrongnum`, user.user_name);
      ElMessage.error('答案错误，再思考一下吧');

    }
  }
  checkedinp.value = '';
  answer.value = '';
  if (num.value === list.length - 1) {
    ElMessage.warning('已经是最后一题了哦！');
  } else {
    num.value++
  }
}

//查看答案
const toview = (id) => {
  let text = ref("");
  list.forEach((item) => {
    if (item.id == id) {
      text.value = item.anser;
    }
  });
  ElMessage({
    message: '答案是：' + text.value,
    type: 'success',
    duration: 1500,
  });
}

// 收藏结构体
const collectData=ref({
  alg_id:"",
  sequnence:"",
  user_name:user.user_name,
  user_id:user.id,
  exe_id:"",
})
// 查找结构体ind
const findData=ref({
  alg_id:"",
  sequnence:"",
  user_id:user.id,
})
// 收藏
const tocollect=async (data)=>{
  findData.value.alg_id=data.alg_id;
  findData.value.sequnence=data.id;
await axios.put(`/oasadapi/collect`,findData.value).then((res)=>{
  if(res.data.length===0){
    collectData.value.alg_id=data.alg_id;
collectData.value.sequnence=data.id;
collectData.value.exe_id=data.exe_id;
 axios.post(`/oasadapi/collect`,collectData.value).then((res)=>{
  if(res.data.code===0){
    ElMessage.success("收藏成功，可在个人中心-收藏习题查看！");
  }else {
    ElMessage.error('收藏失败，请检查网络！');
  }
});
  }else {
    ElMessage.warning('这道题已经被收藏了哦！');
  }
})

}
</script>

<style lang="scss" scoped>
* {
  cursor: default;
}

ul {
  list-style: none;
}

.box {
  width: 100%;
  font-size: 25px;
  margin-top: 30px;
  cursor: default;

  .prac-title {
    font-weight: normal;
  }

  .prac-select {
    font-weight: normal;

    li {
      margin-bottom: 3px;
    }
  }

  button {
    width: 120px;
    height: 40px;
    font-size: 25px;
    border: none;
    margin-left: 10px;
    margin-top: 20px;
    background: rgb(32, 170, 225);
    color: white;
    border-radius: 10px;
    cursor: pointer;
  }
}
</style>